<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta name="misapplication-tap-highlight" content="no" />
  <meta name="HandheldFriendly" content="true" />
  <meta name="MobileOptimized" content="320" />
  <link rel="stylesheet" href="cs.css">
  <title>QmSdk-Storage</title>
</head>

<body>
  <div class="inputItem">键：<input type="text" class="input saveKey" /></div>
  <div class="inputItem">值：<input type="text" class="input saveValue" /></div>
  <div class="button" onclick="save()">
    保存
  </div>

  <br /><br />

  <div class="inputItem">键：<input type="text" class="input searchKey" /></div>
  <div class="button" onclick="search()">
    查询
  </div>

  <div class="info">
  </div>
  <script src="../qmsdk.js"></script>
  <script>
    let saveKeyInput = document.querySelector(".saveKey");
    let saveValueInput = document.querySelector(".saveValue");
    let searchKeyInput = document.querySelector(".searchKey");
    let infoBox = document.querySelector(".info");

    function save() {
      qmSdk.saveH5Data({
        key: saveKeyInput.value,
        value: saveValueInput.value,
        success: () => {
          console.log("保存成功");
          let p = document.createElement("p");
          p.appendChild(document.createTextNode("保存成功"));
          infoBox.appendChild(p);
        },
        fail: (err) => {
          console.log(err);
        }
      })
    }

    function search() {
      qmSdk.getH5Data({
        key: searchKeyInput.value,
        success: (res) => {
          console.log(res);
          let p = document.createElement("p");
          p.appendChild(document.createTextNode(searchKeyInput.value + "：" + res));
          infoBox.appendChild(p);
        },
        fail: (err) => {
          console.log(err);
        }
      })
    }

  </script>
</body>

</html>
